<script setup lang="ts">
import { useDark, useECharts } from "@pureadmin/utils";
import { type PropType, ref, computed, watch, nextTick } from "vue";
// import { statisticsConfig } from "../../utils/hook";

// const { barChartData } = statisticsConfig();

// 使用 defineProps 定义 props
const props = defineProps({
  all: {
    type: Array as PropType<Array<number>>,
    default: () => []
  },
  xq: {
    type: Array as PropType<Array<number>>,
    default: () => []
  },
  parknfly: {
    type: Array as PropType<Array<number>>,
    default: () => []
  },
  rztc: {
    type: Array as PropType<Array<number>>,
    default: () => []
  },
  dingtalk: {
    type: Array as PropType<Array<number>>,
    default: () => []
  }
});

// console.log("ffffff;" + barChartData.value[0].all);

const { isDark } = useDark();

const theme = computed(() => (isDark.value ? "dark" : "light"));

const chartRef = ref();
const { setOptions } = useECharts(chartRef, {
  theme
});
watch(
  () => props,
  async () => {
    await nextTick(); // 确保DOM更新完成后再执行
    setOptions({
      container: ".bar-card",
      color: ["#41b6ff", "#e85f33"],
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "none"
        }
      },
      grid: {
        top: "20px",
        left: "50px",
        right: 0
      },
      legend: {
        data: ["全部", "小强停车", "泊安飞", "如之停车", "钉钉"],
        textStyle: {
          color: "#606266",
          fontSize: "0.875rem"
        },
        bottom: 0
      },
      xAxis: [
        {
          type: "category",
          data: [
            "00",
            "01",
            "02",
            "03",
            "04",
            "05",
            "06",
            "07",
            "08",
            "09",
            "10",
            "11",
            "12",
            "13",
            "14",
            "15",
            "16",
            "17",
            "18",
            "19",
            "20",
            "21",
            "22",
            "23"
          ],
          axisLabel: {
            fontSize: "0.875rem"
          },
          axisPointer: {
            type: "shadow"
          }
        }
      ],
      yAxis: [
        {
          type: "value",
          axisLabel: {
            fontSize: "0.875rem"
          },
          splitLine: {
            show: false // 去网格线
          }
          // name: "单位: 个"
        }
      ],
      series: [
        {
          name: "全部",
          type: "line",
          data: props.all
        },
        {
          name: "小强停车",
          type: "line",
          data: props.xq
        },
        {
          name: "泊安飞",
          type: "line",
          data: props.parknfly
        },
        {
          name: "如之停车",
          type: "line",
          data: props.rztc
        },
        {
          name: "钉钉",
          type: "line",
          data: props.dingtalk
        }
      ]
    });
  },
  {
    deep: true,
    immediate: true
  }
);
</script>

<template>
  <div ref="chartRef" style="width: 100%; height: 365px" />
</template>
